<!-- 拜访记录 -->
<template>
  <div class="container">
    <el-table :data="tableList" border class="table" row-key="id" ref="multipleTableRef" :reserve-selection="true" @row-dblclick="rowDblclick">
      <el-table-column type="index" align="center"></el-table-column>
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="staff.contacts_name" label="业务员" align="center"></el-table-column>
      <el-table-column prop="store.store_name" label="店铺" align="center"></el-table-column>
      <el-table-column prop="store.store_address" label="店铺地址" align="center"></el-table-column>
      <el-table-column prop="address" label="拜访打卡地址" align="center"></el-table-column>
      <el-table-column prop="reason" label="拜访理由" align="center"></el-table-column>
      <el-table-column prop="create_time" label="拜访时间" align="center" :formatter="(row: IVisitListVO) => handleVerifyFormatDate(row.create_time)"></el-table-column>
      <el-table-column prop="image" label="图片" width="150" align="center">
        <template #default="scope">
          <el-image style="width: 60px; height: 60px" :src="scope.row.image" :preview-src-list="scope.row.imageList"></el-image>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @update:current-page="handleCurrentChange"
        @update:page-size="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="searchCondition.size"
        :current-page="searchCondition.current"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :total="total"
        :hide-on-single-page="false">
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { handleVerifyFormatDate } from "@/utils/utils";
import { useState } from "@/hooks/useState.ts";
import type { ISearchVisit, IVisitListVO } from "@/types/visit";
import { getVisitInfo } from "@/utils/api/visit";
import { IMG_URL } from "@/utils/config";

const { toggleState } = useState();
interface Props {
  id: number;
}
const { id } = defineProps<Props>();

/* 暴露一个方法给父组件使用 */
defineExpose({
  getTableInfo
});
const multipleTableRef = useTemplateRef("multipleTableRef"); /* 列表组件的引用 */
const total = ref(0);
const searchCondition = reactive<ISearchVisit>({
  staff_id: "",
  store_id: "",
  store_name: "",
  start_time: "",
  end_time: "",
  current: 1,
  size: 10
});

const tableList = ref<Array<IVisitListVO>>([]);
watch(
  () => id,
  newValue => {
    if (newValue == 0) {
      /* 初始化数据 */
      handleInitData();
    } else {
      searchCondition.store_id = newValue;
      getTableInfo();
    }
  }
);

/* 初始化数据 */
function handleInitData() {
  searchCondition.store_id = "";
  searchCondition.current = 1;
  searchCondition.size = 10;
  tableList.value = [];
}

/* 请求：获取表格中数据 */
function getTableInfo() {
  toggleState(true);
  getVisitInfo<IVisitListVO, ISearchVisit>(searchCondition)
    .then(res => {
      res.result.data.forEach(item => {
        item._image = item.image.split(",").map(_item => IMG_URL + _item);
        item.image = item._image[0];
      });
      tableList.value = res.result.data;
      total.value = res.result.total;
    })
    .finally(() => {
      toggleState(false);
    });
}

/* 显示第几页 */
function handleCurrentChange(val: number) {
  searchCondition.current = val;
  getTableInfo();
}

/* 每页显示几条 */
function handleSizeChange(val: number) {
  searchCondition.size = val;
  getTableInfo();
}
/* 双击当前行 */
function rowDblclick(row: IVisitListVO) {
  multipleTableRef.value!.toggleRowSelection(row);
}
</script>

<style lang="scss" scoped>
/* layout-布局 */
.el-col {
  border-radius: 4px;
}
</style>
